{extend name="main" /}
{block name="body"}
<style>
    .layui-form-onswitch {
        border-color: #ff4d4f !important;
        background-color: #ff4d4f !important;
    }
</style>
{include file="breadcrumb" /}
<div class="layui-fluid">
    <table class="layui-table" style="margin-top: 0;">
        <tr>
            <th><b>id</b></th>
            <th><b>题目</b></th>
            <th><b>上句</b></th>
            <th><b>下句</b></th>
            <th><b>提问录音</b></th>
            <th style="padding: 0 15px;line-height: 40px;"><b>状态</b> </th>
        </tr>

        <tbody id="app">
            {foreach name="list" item="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td>
                    {$vo.poem.title}
                </td>
                <td class="layui-form">
                    {$vo.type == '1' ? '?' :$vo.first}
                </td>
                <td class="layui-form">
                    {$vo.type == '0' ? '?' :$vo.second}
                </td>
                <td>
                    <audio style="height: 30px;" controls="true" src="{:asset($vo.record)}"></audio>
                </td>
                <td class="layui-form">
                    <input type="checkbox" lay-verify="required" lay-filter="hide" name="hide" data-id="{$vo.id}"
                        lay-skin="switch" lay-text="禁用|启用" value="1" {$vo.hide ? 'checked' : '' }>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    <div class="pages">{$list|raw}</div>
</div>
{/block}

{block name="js"}
<script>
    layui.form.on('switch(hide)', function (data) {
        //layer.tips('开关checked：'+ (this.checked ? 'true' : 'false'), data.othis)
        var val = this.checked ? 1 : 0;
        var id = $(this).attr('data-id');
        var url = "{:url('edit')}";
        $.post(url, { id: id, hide: val }, function (res) {
            console.log(res);
            layer.tips(res.msg, data.othis);
        }, 'json')
    });
</script>
{/block}